<template>
  <li>
    <img :src="movie.img" :alt="movie.nm + 'poster'" />
    <h3>{{ movie.nm }}</h3>
    <div>
      <p>
        <span>⭐️</span>
        <span>{{ movie.sc }}</span>
      </p>

      <button class="btn-delete" @click="handleDeleteMovie()">&times</button>
    </div>
  </li>
</template>

<script>
export default {
  props: ["movie", "handleDeleteWatchedMovie"],
  methods: {
    handleDeleteMovie() {
      const movieId = this.movie.id;
      this.handleDeleteWatchedMovie(movieId);
      //把电影从localStorage删除（先获取对象，如何过滤掉id相同的，再添加）
      const watchedMovieList = JSON.parse(localStorage.getItem("watched-movie-list"));
       const filteredMovieList = watchedMovieList.filter((movie) => movie.id !== movieId);
      localStorage.setItem(
        "watched-movie-list",
        JSON.stringify(filteredMovieList)
      );
    },
  },
};
</script>
